<!--钱雨-->
<template>
	<view class="snow-container bj_center">

		<!-- 钞票 -->
		<view class="" v-if="!ifgame">
			<image src="/static/gc/m.png" v-for="(flake, index) in snowflakes" :key="index" class="snowflake"
				:style="flake.style"></image>
		</view>

		<view class="" v-if="ifgame">
			<!-- 金币元素 -->
			<image v-for="(coin, index) in coins" :key="index" class="coin" src="/static/hd/djb.png" mode="aspectFit"
				:style="{
			        left: coin.left + 'px',
			        top: coin.top + 'px',
			        width: coin.size + 'px',
			        height: coin.size + 'px'
			      }" @click="collectCoin(index)" />
		</view>

		<!-- 通知时间盖层 -->
		<view class="snowgc" v-if="tag == 1">
			<image src="/static/xx.png" class="snowgc-xx" @click="clgc"></image>
			<view class="tc f36 fwb mb30">
				{{$t("my.tit1")}}
			</view>
			<view class="snowgc-b1 f30 mb20">
				<view class="bj_center mb10">
					<image src="/static/gc/cp.png"></image>
					<text class="cy fwb">{{$t("menu.$")}}{{info.red_envelope_prize_total}}</text>
					<text>{{$t("my.txt1")}}</text>
				</view>
				<view class="bj_center mb10">
					<image src="/static/gc/cp.png"></image>
					<text>{{$t("my.txt2")}}</text>
					<text class="cy fwb">{{$t("menu.$")}}{{info.red_envelope_max_bonus}}</text>
				</view>
			</view>
			<view class="snowgc-b2">
				<view class="bj_left mb20">
					<text class="f24 fwb" style="margin-right: 30rpx;">
						{{$t("my.tit2")}}
					</text>
					<image src="/static/gc/s4.png" style="margin-top: 4rpx;"></image>
					<text class="c9c f20">{{$t("my.tt")}}</text>
				</view>
				<view class="clearfloat mb20">
					<view class="snowgc-b2-item" v-for="item in info.period_list">
						<image src="/static/gc/s5.png" style="margin-right: 10rpx;"></image>
						<text>{{item.starttime}} - {{item.endtime}}</text>
					</view>
				</view>
				<view class="ca2 f22 mb30" v-html="$t('my.txt3')"></view>
				<view class="bj_center">
					<view class="bj_center snowgc-db" @click="clgc">
						{{$t("my.btn1")}} {{info.next_period.start_time}}
					</view>
				</view>
			</view>
		</view>

		<!-- 开始游戏盖层 -->
		<view class="actgc bj_sx" v-if="tag == 2">
			<view class="fwb f36 mb50">
				{{$t("my.tit3")}}
			</view>
			<view class="f22 mb20" style="color: #AAC0E9;">
				{{$t("my.txt4")}}
			</view>
			<view class="f22 mb50" style="color: #AAC0E9;">
				{{$t("my.txt5")}}{{$t("menu.$")}}{{info.red_envelope_max_bonus}}
			</view>
			<view class="actgc-btn" @click="tohd">
				{{$t("my.btn2")}}
			</view>
		</view>
		<moneygcMyVue ref="mmv"></moneygcMyVue>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		onUnmounted,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';
	import moneygcMyVue from './moneygc-my.vue';
	let tag = ref(0); // 0刚初始化，1没到活动时间，2到了活动时间，3游戏中
	// 获取父级可调用的方法
	const clgc = inject("clgc");
	let mmv = ref(null)

	let info = ref({})
	// 是否在游戏中
	let ifgame = ref(false)
	let nowhd = ref({
		period: 0
	})

	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let loading = ref(false)

	provide("clgc", clgc);

	const snowflakes = ref([])
	const createSnowflakes = () => {
		const flakeCount = 50 // 数量
		const flakes = []

		for (let i = 0; i < flakeCount; i++) {
			const size = Math.random() * 80 + 40 // 40-120px
			const duration = Math.random() * 5 + 5 // 5-10秒
			const delay = Math.random() * 5 // 0-5秒延迟
			const rotation = Math.random() * 360 // 初始旋转角度

			flakes.push({
				style: {
					width: `${size}rpx`,
					height: `${size}rpx`,
					left: `${Math.random() * 100}%`,
					top: `${Math.random() * -180}%`, // 从屏幕外开始
					animationDuration: `${duration}s`,
					animationDelay: `${delay}s`,
					transform: `rotate(${rotation}deg)`
				}
			})
		}

		snowflakes.value = flakes
	}

	onMounted(() => {
		createSnowflakes()
	})

	onShow(function() {
		winit();
	})

	function winit() {
		if (loading.value) {
			return
		}
		loading.value = true
		ifgame.value = false
		common.redenvelopeInit().then(res => {
			loading.value = false
			if (res.data.success) {
				info.value = res.data.data
				if (isCurrentTimeInPeriod(info.value.cur_period)) {
					tag.value = 2
				} else {
					tag.value = 1
				}
			}
		})
		
		common.getMinLoginUser().then(res => {
			getApp().globalData.userInfo.user = res.data.user
		})
	}

	// 开始游戏
	function tohd() {
		let ui = getApp().globalData.userInfo.user
		if (ui.recharge_all > 0) {
			ifgame.value = true
			tag.value = 3
			startMoneyRain()
		} else {
			clgc();
			uni.navigateTo({
				url: "/pages/index/tx"
			})
		}


	}

	function isCurrentTimeInPeriod(period) {
		const now = Math.floor(Date.now() / 1000); // 当前时间戳（秒）
		return now >= period.starttime && now <= period.endtime;
	}


	const act = ref(false)
	const count = ref(0)
	const coins = ref([])
	let rainInterval = null
	let moveInterval = null
	const containerWidth = ref(0)
	const containerHeight = ref(0)


	// 开始金币雨
	const startMoneyRain = () => {
		stopMoneyRain()
		getContainerSize()
		act.value = true
		// 生成金币
		rainInterval = setInterval(createCoin, 300)

		// 10秒后停止
		setTimeout(stopMoneyRain, 10000)

		// 移动金币（每16ms约60fps）
		moveInterval = setInterval(moveCoins, 16)
	}

	// 停止金币雨
	const stopMoneyRain = () => {

		if (rainInterval) clearInterval(rainInterval)
		if (moveInterval) clearInterval(moveInterval)
		coins.value = []
		if (act.value) {
			if (loading.value) {
				return
			}
			loading.value = true
			act.value = false
			common.settlement({
				clicks: count.value,
				period: info.value.cur_period.period
			}).then(res => {
				loading.value = false
				if (res.data.success) {
					mmv.value.setm(res.data.data.money)
					common.reuserinfo()
				} else {
					messageText.value = res.data.message
					msgType.value = "error"
					message.value.open();
					winit();
				}
			})
		}

	}

	// 创建金币
	const createCoin = () => {
		if (coins.value.length > 50) return

		const newCoin = {
			left: Math.random() * (containerWidth.value - 50),
			top: -50,
			speed: 3 + Math.random() * 2, // 下落速度
			size: 40 + Math.random() * 30 // 金币大小40-70px
		}

		coins.value.push(newCoin)
	}

	// 移动金币
	const moveCoins = () => {
		coins.value.forEach((coin, index) => {
			coin.top += coin.speed
			// 落到底部移除
			if (coin.top > containerHeight.value) {
				coins.value.splice(index, 1)
			}
		})
	}

	// 收集金币
	const collectCoin = (index) => {
		count.value++
		coins.value.splice(index, 1)
	}

	// 获取容器尺寸
	const getContainerSize = () => {
		const query = uni.createSelectorQuery()
		query.select('.snow-container').boundingClientRect(data => {
			if (data) {
				containerWidth.value = data.width
				containerHeight.value = data.height
			}
		}).exec()
	}

	onUnmounted(stopMoneyRain)
</script>

<style lang="scss">
	.snow-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 9999;
	}

	.snowflake {
		position: absolute;
		animation-name: fall;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}

	@keyframes fall {
		to {
			transform: translateY(100vh) rotate(360deg);
		}
	}

	.actgc {
		width: 452rpx;
		height: 452rpx;
		background: linear-gradient( 180deg, #007628 0%, #177747 100%);
		border-radius: 20rpx;
		padding: 26rpx 60rpx 44rpx;
		position: relative;

		&-xx {
			position: absolute;
			top: 30rpx;
			right: 26rpx;
			width: 24rpx;
			height: 24rpx;
		}

		&-btn {
			width: 260rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #FFBE32;
			border-radius: 100rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.snowgc {
		width: 600rpx;
		background: linear-gradient( 180deg, #007628 0%, #177747 100%);
		border-radius: 20rpx;
		padding: 26rpx 16rpx 0;
		position: relative;
		z-index: 99;

		&-db {
			width: 456rpx;
			height: 76rpx;
			background: #FFBE32;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
		}

		&-b1 {
			background: #003311;
			border-radius: 20rpx;
			padding: 18rpx 0;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}

		&-b2 {
			background: #003311;
			border-radius: 20rpx;
			padding: 22rpx 32rpx 0;

			image {
				width: 20rpx;
				height: 20rpx;
			}

			&-item {
				font-size: 20rpx;
				color: #BFD2C6;
				float: left;
				width: 33.333%;
				margin-bottom: 10rpx;
			}
		}

		&-xx {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			top: 32rpx;
			right: 36rpx;
		}
	}

	.controls {
		position: fixed;
		top: 30px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 100;
		gap: 10px;

		.btn {
			background-color: #ffd700;
			color: #333;
			font-weight: bold;
			border-radius: 20px;
			padding: 8px 20px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		}

		.counter {
			background-color: rgba(0, 0, 0, 0.7);
			color: #ffd700;
			padding: 8px 16px;
			border-radius: 20px;
			font-size: 16px;
		}
	}

	.coin {
		position: absolute;
		cursor: pointer;
		transition: transform 0.1s;

		&:active {
			transform: scale(1.2);
		}
	}
</style>